<template>
  <div class="page-container padding-20 query-list-container">
    <div>
      <div class="search-container">
        <el-form :inline="true" ref="form" size="small">
          <el-form-item label="操作日期">
            <el-date-picker
              v-model="searchDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
          <el-button @click="onReset" size="small">重置</el-button>
        </el-form>
      </div>
      <el-table class="mt-20 el-table-modify" :data="tableData" border>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="actorName" align="center" label="操作者"></el-table-column>
        <el-table-column prop="actDate" align="center" label="操作时间">
          <template slot-scope="scope">
            <span>{{ scope.row.actDate | dateFrm }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ipAddress" align="center" label="IP地址"></el-table-column>
        <el-table-column prop="content" align="center" label="操作记录"></el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size.sync="pageOption.pageSize"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span class="pagination-title">
          共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
          {{ pageOption.pageTotal }} 页
        </span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { logQuery } from "@/api/logs";
import { momentFormatStr } from '@/utils/const'
import moment from 'moment';

export default {
  name: "LogMgt",
  data() {
    return {
      searchDate: [],
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      }
    };
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.searchDate = [];
      this.requestData();
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption;
      const postData = {};
      if (this.searchDate[0]) {
        postData.start = moment(this.searchDate[0]).format(momentFormatStr.date)
        postData.end = moment(this.searchDate[1]).format(momentFormatStr.date)
      }
      const { data, total } = await logQuery({ page: page - 1, size, ...postData });
      let pageTotal = Math.ceil(total / size);
      this.tableData = data;
      this.pageOption.total = total;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    }
  },
  created() {
    this.requestData();
  }
};
</script>

<style lang="scss">
.pagination-title {
  font-weight: normal;
}
</style>
